<template>
	<view class="persondata">
		<view class="body">
			<view class="avaarea">
				<view class="textavaimg">
					头像
				</view>
				<view class="avaimg">
					<image :src="srcs" class="avaphoto"></image>
				</view>
				<view class="uploadarea">
					<template>

						<u-icon name="arrow-right" color="#2979ff" size="28" @click="getAva"></u-icon>

					</template>
				</view>
			</view>

			<view class="avaarea" @click="showname=true">
				<view class="textava">
					收货人姓名
					<text>{{nickName}}</text>
				</view>



				<view class="iconarea">
					<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
				</view>
			</view>

			<view class="avaarea" @click="showgxqm=true">
				<view class="textava">
					收货地址
					<text class="textgxqm">
						{{address}}
					</text>
				</view>

				<view class="uploadarea">
					<template>
						<!-- <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
							:maxCount="10"> -->
						<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
						<!-- </u-upload> -->
					</template>
				</view>
			</view>

			<view class="avaarea" @click="showphone=true">
				<view class="textava">
					联系方式
					<text>
						{{phonenum}}
					</text>
				</view>

				<view class="uploadarea">
					<template>

						<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>

					</template>
				</view>
			</view>

			<u-popup :show="showname" mode="center" @close="close" @open="open" closeable="true">
				<view class="input">
					<view class="textinput">
						<view class="input_name">
							<u--input placeholder="请输入内容" border="surround" v-model="nickName" @change="changename">
							</u--input>
						</view>

						<view class="button_name">
							<u-button text="保存" type="primary" @click="close"></u-button>
						</view>

					</view>
				</view>
			</u-popup>

			<u-popup :show="showgxqm" mode="center" @close="close" @open="open" closeable="true">
				<view class="input">
					<view class="textinput">

						<view class="input_name">
							<u--input placeholder="请输入收货地址" border="surround" v-model="address" @change="changeaddress">
							</u--input>
						</view>

						<view class="button_name">
							<u-button text="保存" type="primary" @click="close"></u-button>
						</view>

					</view>
				</view>
			</u-popup>

			<u-popup :show="showphone" mode="center" @close="close" @open="open" closeable="true">
				<view class="input">
					<view class="textinput">

						<view class="input_name">
							<u--input placeholder="请输入电话号" border="surround" v-model="phonenum"
								@change="changephonenum"></u--input>
						</view>

						<view class="button_name">
							<u-button text="保存" type="primary" @click="close"></u-button>
						</view>

					</view>
				</view>
			</u-popup>

		</view>

		<view class="buyframe">
			<view class="buttoncontact">
				<u-button type="primary" text="保存" @click="submit"></u-button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList2: [],
				showname: false,
				showgxqm: false,
				showphone: false,
				value1: '2000-06-12',
				value: '',
				columns: [
					['男', '女']
				],
				srcs: '/static/avatest.jpg',
				userInfo: '',
				valuename: '',
				nickName: '',
				address: '内蒙古师范大学盛乐校区',
				phonenum: '13044745634',
				openid: null,
			}
		},
		onLoad(options) {

			this.userInfo = JSON.parse(decodeURIComponent(options.userInfo));
			console.log(this.userInfo);
			this.srcs = this.userInfo.avatarUrl;
			this.nickName = this.userInfo.nickName;

		},
		mounted() {
			let _this = this;
			uni.getStorage({
				key: 'user',
				success: (res) => {
					_this.openId = res.data.openId
				},
			})
		},
		methods: {
			submit() {
				console.log("headImg:", this.srcs);
				console.log("realName:", this.nickName);
				console.log("telNum:", this.phonenum);
				console.log("address:", this.address);
				console.log("openId:", this.openId);
				var _this = this;
				this.$axios({
					method: 'POST',
					url: '/user/update',
					data: {
						realName: _this.nickName,
						telNum: _this.phonenum,
						address: _this.address,
					}
				}).then(
					res => {
						console.log(res.data);
					}
				).catch(
					err => {
						console.log(err);
					}
				)

			},
			open() {
				// console.log('open');
			},
			close() {

				this.showname = false;
				this.showgxqm = false;

				this.showphone = false;
				this.showemail = false;
				this.showbirthday = false;
				this.showrealname = false;
				// console.log('close');
			},
			getAva() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //指定压缩图
					success: function(res) {
						console.log(res.tempFilePaths[0])
						let path = res.tempFilePaths[0]
						uniCloud.uploadFile({
							filePath: path,
							cloudPath: Date.now() + '.png',
							onUploadProgress: function(progressEvent) {
								console.log(progressEvent);
							},
							success: function(res) {
								console.log(res)
								uni.showToast({
									icon: 'none',
									title: '上传成功',
									duration: 1500
								})
								let purl = res.fileID;
								uniCloud.getTempFileURL({
									fileList: [purl],
									success: function(res) {
										console.log("地址：" + res.fileList[0]
											.tempFileURL);
										that.srcs = res.fileList[0].tempFileURL;
										console.log("头像:" + that.srcs);
									}
								})
							},

						})

					}
				})
			},

			changename() {
				console.log(this.nickName);
			},
			changeaddress() {
				console.log(this.address);
			},
			changephonenum() {
				console.log(this.phonenum);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.buyframe {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 150upx;
		background-color: #FFFFFF;
		// border-radius: 1px;
		border-left: none;
		border-right: none;
		border-bottom: none;
		// border-style: solid;
		border-top: #eeeeef 1upx solid;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-top-right-radius: 15upx;
		border-top-left-radius: 15upx;
		display: flex;
		justify-content: space-around;

		.buttoncontact {
			margin-top: 4%;
			width: 40%;
		}
	}

	.intput {
		padding: 20upx;
	}

	.button_name {
		width: 200upx;
		margin-left: 80upx;
		margin-top: 40upx;
	}

	.input_name {
		border: 1upx solid #3B3532;
		margin-top: 80upx;
		margin-left: 20upx;
		margin-right: 20upx;
	}

	.persondata {
		font-family: "Hiragino Sans GB", "PingFang SC";
		height: 100%;

		.body {
			width: 100%;
			background-color: #eeeeef;
			overflow: hidden;
			height: 1400upx;

			.avaarea {
				margin-top: 20upx;
				width: 90%;
				margin-left: 5%;
				height: 140upx;
				background-color: #ffffff;
				border-radius: 20upx;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				border: 1upx solid lightgray;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

				.uploadarea {}

				.avaimg {
					margin-left: 58%;
				}

				.avaphoto {
					width: 80upx;
					height: 80upx;
				}

				.textavaimg {
					font-size: 34upx;
					margin-left: 30upx;
					font-weight: 800;

				}

				.textava {
					font-size: 34upx;
					margin-left: 30upx;
					font-weight: 800;
					width: 80%;
					// background-color: #3B3532;
					display: flex;
					justify-content: space-between;

					.textgxqm {

						width: 300upx;
						display: inline-block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
</style>
